<template>
  <div class="login-container">
    <center><h1>9527医卫后台管理系统</h1></center>
    <hr style='border:0.5px dotted skyblue;'>
    <el-form :model="form" class="login-page" :rules="rules" status-icon>
      <center><h3>欢迎登录</h3></center>
      <el-form-item prop="username">
        <el-input prefix-icon="el-icon-user" type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
      <el-form-item style="width: 70%;display: inline-block" prop="code" class="checkcode1">
        <el-input style="margin-left:13%" prefix-icon="el-icon-coordinate" type="text" v-model="form.code" placeholder="请输入验证码" maxlength="4" @keyup.enter.native="handleSubmit"></el-input>
      </el-form-item>
      <div style="display: inline-block;font-size: 20px;width: 18%" @click="createCode" class="checkcode2">{{ checkCode}}</div>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      form: {
        username: '',
        password: '',
        code:''
      },
      checkCode:'',
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
          { min: 6, message: '长度至少6位', trigger: 'blur' }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, message: '请输入4位验证码', trigger: 'blur' }]
      },
    }
  },
  mounted () {
    this.createCode();
  },
  methods: {
    handleSubmit(){
      const that=this;
      console.log(this.form);
      if(this.form.code != this.checkCode) {
        this.$alert('验证码错误，注意大写字母', '错误', {
          confirmButtonText: '确定',
          type: 'error',
        })
        this.createCode();
        this.form.code='';
      }
      else {
        axios.post("http://47.108.201.43:3000/api/login", {
          username: this.form.username,
          password: this.form.password,
        }).then(function (res) {
          if (res.data.code == 200) {
            console.log(res);
            that.$router.push("home");
          } else {
            that.$alert(res.data.error, '错误', {
              confirmButtonText: '确定',
              type: 'error',
            })
            
            that.form.password = ''
            that.createCode();
            that.form.code='';
          }
        })
      }
    },
    createCode() {
      let code = "";
      const codeLength = 4; //验证码的长度
      const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数
      for(let i = 0; i < codeLength; i++) { //循环操作
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    },
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg.png");
  background-size: 100% 100%;
  background-position: center;
  position: fixed;
  top: 0px;
  left: 0px;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 145px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
h1{color: white;font-family: 楷体;font-size: 45px}
.checkcode1{
  position: relative;
  left: -32.5px;
}
.checkcode2{
  position: relative;
  right: -32px;
  vertical-align: middle;
  border: #2c3e50 1px solid;
  padding: 5px 5px 5px 5px;
}
</style>